⬅ Back

STRINGS

This note explains strings in simple language.

It includes all main ideas from the lesson, but in a clearer order with extra examples.

1. What is a string?

A string is a sequence of characters.

A string can contain:

Strings are written inside quotes:

const username = "Aaron";
const city = 'Berlin';

Both single quotes ' ' and double quotes " " work for normal strings.

Examples

const message = "Hello";
const password = "abc123";
const text = "JavaScript is fun";

2. Why strings are important

Strings are used everywhere in JavaScript:

If you build websites, you will work with strings all the time.

Diagram 1. What a string is

1. "Hello"        → string
2. "123"          → string
3. "true"         → string
4. "My name is Isaac" → string

Important:

"25"

is a string, not a number, because it is inside quotes.

3. String concatenation

Concatenation means joining strings together.

In JavaScript, the + operator can join strings.

Example

const message = "Aaron " + "is" + " happy";
console.log(message); // "Aaron is happy"

The result is one new string.

Important note about spaces

When joining strings, spaces do not appear automatically. You must add them yourself.

Example:

const message = "Aaron" + "is" + "happy";
console.log(message); // "Mangoishappy"

Better:

const message = "Aaron " + "is " + "happy";
console.log(message); // "Aaron is happy"

4. Concatenation with variables

You can join strings and variable values.

Example

const age = 24;
const message = "Benjamin is " + age + " years old!";
console.log(message); // "Benjamin is 24 years old!"

Here JavaScript takes the value of age and inserts it into the new string.

Diagram 2. How concatenation works

1. "Benjamin is "      → string
2. age             → variable with value 24
3. " years old!"   → string

Result:
"Benjamin is 24 years old!"

5. Concatenation with other data types

If you use + with a string and another type, JavaScript converts the other value to a string.

Examples

console.log("Aaron" + 55);   // "Mango55"
console.log("Aaron" + true); // "Mangotrue"

So during concatenation:

6. Order matters in concatenation

This is very important.

Type conversion happens only when JavaScript meets a string in +.

Examples

console.log(1 + "2");     // "12"
console.log(1 + "2" + 4); // "124"
console.log(1 + 2 + "4"); // "34"

Why?

Example 1

1 + "2"

Example 2

1 + "2" + 4

Example 3

1 + 2 + "4"

So the order of operands changes the result.

Diagram 3. Why order matters

1. 1 + "2"
   → "12"

2. 1 + "2" + 4
   → "12" + 4
   → "124"

3. 1 + 2 + "4"
   → 3 + "4"
   → "34"

7. Type conversion with strings

In JavaScript, type conversion means changing a value from one type to another.

There are two kinds:

  1. explicit conversion
  2. implicit conversion

8. Explicit type conversion to string

Explicit conversion means the programmer does it manually.

To convert a value to a string, use the String() function.

Examples

console.log(String(5));         // "5"
console.log(String(true));      // "true"
console.log(String(false));     // "false"
console.log(String(null));      // "null"
console.log(String(undefined)); // "undefined"

This is useful when you want to control conversion yourself.

9. Implicit type conversion to string

Implicit conversion means JavaScript does it automatically.

This often happens when you use + with a string.

Examples

console.log("5" + 3);         // "53"
console.log("5" + true);      // "5true"
console.log("5" + false);     // "5false"
console.log("5" + null);      // "5null"
console.log("5" + undefined); // "5undefined"

JavaScript automatically converts the second value into a string.

10. Why implicit conversion can be dangerous

Implicit conversion is convenient, but sometimes it gives unexpected results.

Example:

console.log("10" + 5); // "105"

A beginner may expect 15, but JavaScript makes a string, not a number.

So when you work with strings and numbers together, be careful.

11. Reading code example

Example:

console.log("false" + null);

What happens?

"falsenull"

12. Template strings

Template strings are a modern and easier way to build strings.

They help combine:

Template strings are easier to read than long concatenations.

13. Template string syntax

Template strings use backticks, not normal quotes.

Backticks look like this:

`

Inside template strings, you can insert values with:

${...}

This is called interpolation.

Example

const guestName = "Aaron";
const roomNumber = 207;
const greeting = `Welcome ${guestName}, your room number is ${roomNumber}!`;

console.log(greeting);
// "Welcome Aaron, your room number is 207!"

Diagram 4. Template string structure

1. Use backticks: ` `
2. Write normal text inside
3. Insert variables with ${variable}

Example:
`Hello ${name}`

14. Concatenation vs template strings

Concatenation version

const guestName = "Aaron";
const roomNumber = 207;
const greeting =
  "Welcome " + guestName + ", your room number is " + roomNumber + "!";

console.log(greeting);

Template string version

const guestName = "Aaron";
const roomNumber = 207;
const greeting = `Welcome ${guestName}, your room number is ${roomNumber}!`;

console.log(greeting);

Both versions work, but the template string version is cleaner and easier to read.

Rule

In modern JavaScript, template strings are often the better choice.

15. You can also insert expressions in template strings

Inside ${}, you can write not only variables, but also expressions.

Example

const price = 100;
const quantity = 3;

console.log(`Total: ${price * quantity}`); // "Total: 300"

This is very useful in real projects.

16. String length

Strings have properties.

A property is a characteristic of some value.

For strings, one important property is:

length

The length property shows how many characters are in the string.

Example

const productName = "Repair droid";

console.log(productName.length);    // 12
console.log("Repair droid".length); // 12

17. How .length works

length counts all characters:

Example:

const text = "Hi there";
console.log(text.length); // 8

Why 8?

Because:

Space is also a character.

Diagram 5. String length

String: "JavaScript"

Characters:
J a v a S c r i p t

Length:
10

18. String indexing

A string is a sequence of characters, and each character has a position number.

This position number is called an index.

Important:

String indexing starts from 0.

So in the string "JavaScript":

and so on.

Example

const product = "Repair droid";

console.log(product[0]);  // "R"
console.log(product[5]);  // "r"
console.log(product[11]); // "d"

19. Index and length are not the same

This is a very important beginner idea.

If a string has length 10, the last index is 9.

Formula:

last index = string.length - 1

Because indexing starts at zero.

Diagram 6. Indexes in a string

String:  "JavaScript"
Length:   10

Index:    0 1 2 3 4 5 6 7 8 9
Chars:    J a v a S c r i p t

20. Getting the last character

To get the last character of a string:

string[string.length - 1]

Example with variable

const product = "Repair droid";
const lastElementIndex = product.length - 1;

console.log(product[lastElementIndex]); // "d"

Shorter version

const product = "Repair droid";
console.log(product[product.length - 1]); // "d"

This is a very common pattern in JavaScript.

21. String immutability

Strings in JavaScript are immutable.

This means:

You cannot change one character inside an existing string.

Example

let product = "Droid";
console.log(product); // "Droid"

product[2] = "O";
console.log(product); // "Droid"

The string does not change.

Even though we tried to change one character, it had no effect.

22. How to change a string correctly

Because strings are immutable, you must create a new string.

Example

let product = "Droid";
console.log(product); // "Droid"

product = "DrOid";
console.log(product); // "DrOid"

Here we did not change the old string directly. We created a new string and assigned it to the variable.

Diagram 7. String immutability

1. Original string:
   "Droid"

2. Try to change one character:
   product[2] = "O"

3. Result:
   no change

4. Correct way:
   create a new string
   "DrOid"

23. Reading code example

Look at this code:

let username = "Benjamin";
username[3] = "a";

What happens?

Final value of username is still:

"Benjamin"

24. Dot notation

To access a property, JavaScript often uses dot notation:

entity.property

For strings, this is used with .length.

Example

const city = "Berlin";
console.log(city.length); // 6

Here:

25. Useful practical examples

Example 1. Concatenation

const firstName = "Nikita";
const message = "Hello, " + firstName + "!";
console.log(message); // "Hello, Nikita!"

Example 2. Template string

const firstName = "Nikita";
const message = `Hello, ${firstName}!`;
console.log(message); // "Hello, Nikita!"

Example 3. String with number

const age = 25;
console.log("Age: " + age); // "Age: 25"

Example 4. Checking length

const word = "developer";
console.log(word.length); // 9

Example 5. First character

const word = "JavaScript";
console.log(word[0]); // "J"

Example 6. Last character

const word = "JavaScript";
console.log(word[word.length - 1]); // "t"

26. Common beginner mistakes

Mistake 1. Forgetting spaces in concatenation

const text = "Hello" + "world";
console.log(text); // "Helloworld"

Better:

const text = "Hello " + "world";
console.log(text); // "Hello world"

Mistake 2. Using normal quotes instead of backticks for template strings

Incorrect:

const name = "Aaron";
const text = "Hello ${name}";
console.log(text); // "Hello ${name}"

This does not insert the variable.

Correct:

const name = "Aaron";
const text = `Hello ${name}`;
console.log(text); // "Hello Aaron"

Mistake 3. Confusing string and number

console.log("5" + 3); // "53"

This is not 8, because "5" is a string.

Mistake 4. Trying to change a character directly

let word = "cat";
word[0] = "B";
console.log(word); // "cat"

The string does not change.

Correct:

let word = "cat";
word = "Bat";
console.log(word); // "Bat"

27. Why template strings are better in real projects

Template strings are usually better because they are:

This matters a lot in full stack development, where strings are often used for:

28. Full summary

String

A sequence of characters inside quotes.

Concatenation

Joining strings with +.

Type conversion

Changing a value from one type to another.

Explicit conversion

Done manually by the programmer, for example with String().

Implicit conversion

Done automatically by JavaScript.

Template string

A string written with backticks that can include ${} interpolation.

Interpolation

Inserting variables or expressions inside a template string.

length

A string property that returns the number of characters.

Index

The position of a character in a string.

Immutability

Strings cannot be changed character by character after creation.

29. Quick revision block

1. String = text inside quotes
2. + with strings = concatenation
3. String + number = string result
4. Order matters in concatenation
5. String() = explicit conversion to string
6. Backticks ` ` are used for template strings
7. ${value} inserts values into template strings
8. .length gives string length
9. Index starts at 0
10. Last character index = length - 1
11. Strings are immutable

30. Final conclusion

Strings are one of the most important topics in JavaScript.

If you understand:

then you already have a strong foundation for writing real JavaScript code.

Strings are everywhere in web development, so this topic is very important for becoming a full stack developer.

⬅ Back